<?php
function catalogToSelect(string $cual):string {
    $ret = [];
    $catalog = json_decode(obtenCatalogo('bodega'), true);
    foreach($catalog as $c) {
        $ret[] = "<option value='$c[real_value]'>" . ia_htmlentities($c['label']) . "</option>";
    }
    return implode("", $ret);
}
return <<< 'CODE_DIALOGO_EXISTENCIAS'
<!--suppress CssUnusedSymbol -->
    <style>
    .unidad {font-family: monospace, monospace; visibility:hidden}
    
    TR.totalizador_subTotal {}
    TR.totalizador_subTotal1 {
        background-color: #C0C0C0;
        border-bottom: 2px solid #a3a4a5;
    }
    TR.totalizador_subTotal2 {
        background-color: #F0F0F0;
        border-bottom: 2px solid #a3a4a5;
    }
    TR.totalizador_subTotal3 {
        background-color: #E0E0E0;
        border-bottom: 2px solid #a3a4a5;
    }
        TR.totalizador_subTotal4 {
        background-color: #D0D0D0;
        border-bottom: 2px solid #a3a4a5;
    }
    .der {text-align: right}
    .cen {text-align: center}
    .izq {text-align: left}
        .totalizador_table{border-collapse:collapse; }
        
        .totalizador_table th{ vertical-align:top;text-align:center;padding:1em;/*border-radius:7px;*/}
        .totalizador_table td{ text-align:left;vertical-align:top;padding:1em;font-weight:normal;}
        
        .totalizador_table th.izq{text-align:left;}
        .totalizador_table th.cen{text-align:center;}
        .totalizador_table th.der{text-align:right;}
        
        .totalizador_table td.izq{text-align:left;}
        .totalizador_table td.cen{text-align:center;}
        .totalizador_table td.der{text-align:right;}

        /** estos los usa el codigo */
        .totalizador_numero {color:red}
        .totalizador_negativo {color:red}
        .totalizador_pointer {cursor:pointer;}
        .totalizador_level_menu {cursor:pointer;color:#060606; text-decoration:underline;text-decoration-style:dashed}
        .totalizador_openClose {color:green;padding-right:0.5em}

        .totalizador_subTotalLabel {font-weight:bolder;}
        .totalizador_subTotalValue {font-weight:bolder;font-family: monospace, monospace;}

        .en_remate {padding-right:0.5em;color:purple}
        .es_saldo {padding-right:0.5em;color:purple}
        .lento {padding-right:0.5em;color:blue;}
        .super_lento {padding-right:0.5em;color:blue}
    </style>
    <!--suppress JSAssignmentUsedAsCondition -->
    <script>
    function totalizadorToggleGroup(element, level) {
        let elementOpenMarker = element.getElementsByClassName("totalizador_openClose"), isClosed=false, prevClosed=false;
        if(elementOpenMarker.length) {
            elementOpenMarker[0].innerHTML = elementOpenMarker[0].innerHTML === '▼' ? '▶' : '▼';
            prevClosed = isClosed = elementOpenMarker[0].innerHTML === '▶';
        }
        let el = element.parentElement;        
        while (el = el.nextSibling) {
            if(el.dataset.level <= level)
                break;
            let marker = el.getElementsByClassName("totalizador_openClose"),
                isDataRow = marker.length === 0;
            if(isClosed) {
                el.style.display = "none";
                continue;
            }
            if(isDataRow) {
               el.style.display =  prevClosed ? "none" : "";
               continue;
            }
            prevClosed = marker[0].innerHTML === '▶';
            el.style.display = "";
        }
    }
    function showLevel(level) {
        $('#tabla_consulta_existencia tbody').children('TR').each(function () {
            let thisLevel = this.dataset.level, marker = this.getElementsByClassName("totalizador_openClose");
            
            this.style.display = typeof thisLevel !== 'undefined' && level >= thisLevel ? "" : "none";
            if(marker.length > 0)
                marker[0].innerHTML = level <= thisLevel ? '▶' : '▼';
        });
    }
    function showAll() {
        $('#tabla_consulta_existencia tbody').children('TR').each(function(){
            this.style.display = "";
            let marker = this.getElementsByClassName("totalizador_openClose");
            if(marker.length > 0)
                marker[0].innerHTML = '▼';        
        });
    }
</script>

<dialog id="consultaExistenciaProducto">
    <span class="vx_icon vx_icon_close" id="close_dialog_existencia_producto"></span>
    <h2 id="title_dialog_existencia_producto">Consulta Existencia de Producto</h2>


    
    <div class="flexRow" style="align-items: center">
        <div class="flexItem">
            <label style="font-family:monospace; background-color:#c9dfef;border-bottom-style: groove; border-radius:5px; display:inline-block; width:75px;padding: 2.5px;" for="dialog_bodega" class="bold lbl">Bodega:</label><br>
            <div class="InputAddOn">
                <input style="border-radius:8px" name="dialog_bodega" id="dialog_bodega" type="text" autocomplete="off" class="inputEntrada" data-campo="bodega" value="" />
                <input name="dialog_bodega_id" id="dialog_bodega_id" type="hidden" data-campo="bodega_id" value=""/>
                <span class="vx_icon vx_icon_close" id="icon_clean_bodega" title="Limpiar bodega" onclick="dialogConsultarExistencia.limpiar('dialog_bodega');" style="visibility: hidden; "></span>
            </div>
        </div>
        <div class="flexItem">
            <label style="font-family:monospace; background-color:#c9dfef;border-bottom-style: groove; border-radius:5px; display:inline-block; width:75px;padding: 2.5px;" for="dialog_producto" class="bold lbl">Producto:</label><br>
            <div class="InputAddOn">
                <input style="border-radius:8px" name="dialog_bodega" id="dialog_producto" type="text" autocomplete="off" class="inputEntrada" data-campo="producto" value="" />
                <input name="dialog_producto_id" id="dialog_producto_id" type="hidden" data-campo="producto_general_id" value=""/>
                <span class="vx_icon vx_icon_close" id="icon_clean_producto" title="Limpiar producto" onclick="dialogConsultarExistencia.limpiar('dialog_producto');" style="visibility: hidden; "></span>
            </div>
        </div>
        <div class="flexItem">
            <label style="font-family:monospace; background-color:#c9dfef; border-bottom-style: groove; border-radius:5px; display:block; width:50px;padding: 2.5px;" for="dialog_color" class="bold lbl">Color:</label>
            <div class="InputAddOn">
                <input style="border-radius:8px" name="dialog_color" id="dialog_color" type="text" autocomplete="off" class="inputEntrada" data-campo="color" value=""/>
                <input name="dialog_color_id" id="dialog_color_id" type="hidden" data-campo="color_id" value=""/>
                <span class="vx_icon vx_icon_close" id="icon_clean_color" title="Limpiar color" onclick="dialogConsultarExistencia.limpiar('dialog_color');" style="visibility: hidden;"></span>
            </div>
        </div>
        <div class="flexItem">
            <input id="dialogo_existencia_todo" value='todo' type="checkbox"><label for="dialogo_existencia_todo"> Todo</label><br>
            <input id="dialogo_existencia_saldo" value='Si' type="checkbox"><label for="dialogo_existencia_saldo"> Saldo</label>
            <input id="dialogo_existencia_lento" value='Si' type="checkbox"><label for="dialogo_existencia_lento"> Lento</label>
        </div>
    </div>

    <table style="align-items: center;font-family: monospace monosapce;" align="center"  id="tabla_consulta_existencia">
        <caption style="background-color:#c9dfef;border-bottom-style: groove; border-radius:5px; 
            width: 90%; margin-left: auto; margin-right:auto; text-align:center;"
        >Seleccione: la bodega, el producto y/o color a consultar</caption>
        <thead>
            <tr>
                <th>
                <span style='cursor:pointer;font-size:2em;color:blue;' id='dialogo_existencia_swap' title='Cambia a totales por Producto / Color / Bodega' onclick='dialogConsultarExistencia.reGroupBy()'>⇴</span>
                <span id='dialogo_existencia_ordena'>
                    <span class='totalizador_level_menu' onClick="showLevel(1)">Bodega</span> / <span class='totalizador_level_menu' onClick="showLevel(2)">Producto</span> / <span class='totalizador_level_menu' onClick="showAll()">Color</span>
                </span>
                    
                <th style='width:10em;' class="der">Rollos</th>
                <th colspan="2" style='width:12em;  class="der"'>Quantity</th>
                <th colspan="2">
            </tr>
             <tr class="totales" id="totales">
                <th colspan="4" id="label_consultando_existencia">Seleccione producto</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</dialog>

<!--suppress ES6ConvertVarToLetConst -->
    <script>
    var productos_generales_dialog=[],colores_dialog=[];
    $(function () {dialogConsultarExistencia.init();});

    const dialogConsultarExistencia = {
        version: 'UI', // [HTML, UI]

        consultaExistenciaTomaInputs: function() {
            if($("#dialog_bodega").val().trim() === '')
                $('#dialog_bodega_id').val('');
            if($("#dialog_producto").val().trim() === '')
                $('#dialog_producto_id').val('');
            if($("#dialog_color").val().trim() === '')
                $('#dialog_color_id').val('');
        },

        init: function () {
            if (dialogConsultarExistencia.version === 'UI') {
                $('#consultaExistenciaProducto').dialog({
                    autoOpen: false,
                    modal: false,
                    width: 970,
                    height: 790,
                    draggable: true,
                    resizable: true,
                    title: $('#title_dialog_existencia_producto').html(),
                    open: function() {$("#dialog_producto").focus();},
                    close: function() {dialogConsultarExistencia.hide();}
                });
            }



            $("#dialogo_existencia_todo").off('change',dialogConsultarExistencia.consultaExistencia).on('change',dialogConsultarExistencia.consultaExistencia);
            $("#dialogo_existencia_lento").off('change',dialogConsultarExistencia.consultaExistencia).on('change',dialogConsultarExistencia.consultaExistencia);
            $("#dialogo_existencia_saldo").off('change',dialogConsultarExistencia.consultaExistencia).on('change',dialogConsultarExistencia.consultaExistencia);

            var request = {
                url: window.location.origin + '/' +  window.location.pathname.split('/')[1] + '/backoffice/ajax/catalogos_acciones.php',
                data: {
                    accion: 'obtenCatalogo',
                    catalogo: ['producto_general', 'color', 'bodega'],
                    genera: true,
                    customAutocomplete: true,
                },
            };
            jqAjax(request, (response) => {
                bodegas=response.catalogos.bodega;
                productos_generales_dialog = response.catalogos.producto_general;
                colores_dialog = response.catalogos.color;

                $d.initAutoComplete('#dialog_bodega', response.catalogos.bodega, '#dialog_bodega_id', (bodega) => {
                    dialogConsultarExistencia.consultaExistencia();
                });
                $d.initAutoComplete('#dialog_producto', response.catalogos.producto_general, '#dialog_producto_id', (producto) => {
                    dialogConsultarExistencia.consultaExistencia();
                });
                $d.initAutoComplete('#dialog_color', response.catalogos.color, '#dialog_color_id', (color) => {
                    dialogConsultarExistencia.consultaExistencia();
                });
            });
            $("#dialog_bodega").on("blur", dialogConsultarExistencia.consultaExistenciaTomaInputs);
            $("#dialog_producto").on("blur", dialogConsultarExistencia.consultaExistenciaTomaInputs);
            $("#dialog_color").on("blur", dialogConsultarExistencia.consultaExistenciaTomaInputs);
        },

        show: function () {
            if (dialogConsultarExistencia.version === 'UI') {
                $('#close_dialog_existencia_producto').hide();
                $('#title_dialog_existencia_producto').hide();
                $( "#consultaExistenciaProducto" ).dialog( "open" );
                return;
            }
            $('#consultaExistenciaProducto').height(500).draggable()[0].showModal();
            $('#close_dialog_existencia_producto').click(() =>{ dialogConsultarExistencia.hide(); });
        },

        hide: function () {
            $("#dialog_color").val('');
            $("#dialog_color_id").val('');
            $("#dialog_producto").val('');
            $("#dialog_producto_id").val('');
            $("#dialog_bodega").val('');
            $("#dialog_bodega_id").val('');
            
            dialogConsultarExistencia.consultaExistencia(
                $('#dialog_bodega_id').val().trim(),
                $('#dialog_producto_id').val().trim(),  
                $('#dialog_color_id').val().trim()
            );
            
            if (dialogConsultarExistencia.version === 'UI') {
                $('#consultaExistenciaProducto').dialog('close');
            } else {
                var existenciasDialog = document.getElementById('consultaExistenciaProducto');
                existenciasDialog.close();
            }
        },

        consultaExistencia: function () {
            var bodega_id =  $('#dialog_bodega_id').val().trim();
            var producto_general_id =  $('#dialog_producto_id').val().trim(); 
            var color_id=  $('#dialog_color_id').val().trim();
            var lento = $("#dialogo_existencia_lento").is(":checked");
            var saldo = $("#dialogo_existencia_saldo").is(":checked");
            var todo = $("#dialogo_existencia_todo").is(":checked");
            if(bodega_id === '' && producto_general_id === '' && color_id === '' &&  !saldo && !lento && !todo ) {
                $('#tabla_consulta_existencia caption').html("Seleccione la bodega, el producto y/o color a consultar" );
                $('#tabla_consulta_existencia tbody').html('');
                $('#totales').html('');
                return;
            }
            $('#label_consultando_existencia').html('Buscando existencia ...');
            var request = {
                url: window.location.origin + '/' +  window.location.pathname.split('/')[1] + '/backoffice/ajax/existencia_acciones.php',
                data: {
                    accion: 'consultarExistenciaParaDialogoTotalizado',
                    bodega_id: bodega_id,
                    producto_general_id: producto_general_id,
                    color_id: color_id,
                    saldo:saldo ? '1' : '',
                    lento: lento ? '1' : '',
                    todo: todo ? '1' : '',
                    groupBy: $("#dialogo_existencia_swap").data('group'),
                }
            };

            jqAjax(request, (response) => {
//                console.log("existencia", response.query);
                var
                    bodega=$("#dialog_bodega").val().trim(),
                    producto=$("#dialog_producto").val().trim(),
                    color=$("#dialog_color").val().trim(),
                    caption = ("<b>" + producto + " " + color).trim() + "</b>",
                    lento = $("#dialogo_existencia_lento").is(":checked")
                ;
                if (bodega)
                    $('#icon_clean_bodega')._show();
                if (producto)
                    $('#icon_clean_producto')._show();
                if (color)
                    $('#icon_clean_color')._show();
                if(producto === '' && color !== '')
                    caption = ' Color: ' + caption;  
                if($("#dialogo_existencia_saldo").is(":checked")) {
                    if(lento)
                        caption = "<b>Saldos</b> y <b>Lentos</b> " + caption; 
                    else
                        caption = "<b>Saldos</b> " + caption;
                } else if(lento)
                    caption = "<b>Lentos</b> " + caption;     
                      
                if(bodega === '')
                    caption += ', en todas las bodegas';
                else if($("#dialog_producto").val() === '' && $("#dialog_color").val() === '')
                    caption += 'Bodega: <b>' + $("#dialog_bodega").val() + '</b>';  
                else                 
                    caption += ', en la Bodega: <b>' + $("#dialog_bodega").val() + '</b>';


                $('#tabla_consulta_existencia caption').html( $("#dialogo_existencia_todo").is(":checked") ? "All" : caption );
                $('#tabla_consulta_existencia tbody').html(response.totalizado);
                $('#totales').html(`<th></th><th class="der">${$.fmatter.util.NumberFormat(response.totales.existencia_rollos, $.jgrid.formatter.integer)}</th><th class="der">${$.fmatter.util.NumberFormat(response.totales.existencia_quantity, $.jgrid.formatter.number)}</th><th></th>`);
            });
        },

        limpiar: function (idInput = null) {
            if (idInput !== null) {
                $("#" + idInput).val('').trigger('change');
                $('#'+idInput+ '_id').val('');
                if (idInput === 'dialog_bodega')
                    $('#icon_clean_bodega')._hide();                
                if (idInput === 'dialog_producto')
                    $('#icon_clean_producto')._hide();
                if (idInput === 'dialog_color')
                    $('#icon_clean_color')._hide();
                dialogConsultarExistencia.consultaExistencia();
            }
        },
        
        reGroupBy: function() {
            let bodegaProducto = "<span class='totalizador_level_menu' onClick='showLevel(1)'>Bodega</span> / <span class='totalizador_level_menu' onClick='showLevel(2)'>Producto</span> / <span class='totalizador_level_menu' onClick='showAll()'>Color</span>";
            let productoColor = "<span class='totalizador_level_menu' onClick='showLevel(1)'>Producto</span> / <span class='totalizador_level_menu' onClick='showLevel(2)'>Color</span> / <span class='totalizador_level_menu' onClick='showAll()'>Bodega</span>";
            let productoBodega = "<span class='totalizador_level_menu' onClick='showLevel(1)'>Producto</span> / <span class='totalizador_level_menu' onClick='showLevel(2)'>Bodega</span> / <span class='totalizador_level_menu' onClick='showAll()'>Color</span>";
            let $swap = $("#dialogo_existencia_swap"), era=$swap.text();
            let $ordena = $("#dialogo_existencia_ordena");
            switch(era) {
                case '⬰':
                    $swap.html('⇴').attr('title','Cambia a totales por Producto / Color / Bodega').data('group', ['bodega', 'producto', 'color']);
                    $ordena.html(bodegaProducto);
                    break;
                case '⇴':
                    $swap.html('⦽').attr('title','Cambia a totales por  Producto  / Bodega/ Color').data('group',['producto', 'color', 'bodega']);
                    $ordena.html(productoColor);
                    break;
                case '⦽':
                    $swap.html('⇴').attr('title','Cambia a totales por Bodega / Producto / Color').data('group', ['producto','bodega',  'color']);
                    $ordena.html(productoBodega);
                    break;

            }
            dialogConsultarExistencia.consultaExistencia();
        }
    };
    Object.freeze(dialogConsultarExistencia);

    (function($){
        $.fn._show = function(){
            $(this).css('visibility', 'visible');
        };
        $.fn._hide = function(){
            $(this).css('visibility', 'hidden');
        };
    })(jQuery);
</script>
CODE_DIALOGO_EXISTENCIAS;
